<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸿蒙基础知识考试</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #0066ff;
            margin-bottom: 10px;
        }

        .exam-info {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .info-item {
            background: #e6f2ff;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: 500;
        }

        .main-content {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .questions-section {
            flex: 2;
            min-width: 300px;
        }

        .sidebar {
            flex: 1;
            min-width: 250px;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .timer-container {
            text-align: center;
            padding: 20px;
        }

        .timer {
            font-size: 2.5rem;
            font-weight: bold;
            color: #0066ff;
            margin: 15px 0;
        }

        .question-nav {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .nav-item {
            width: 100%;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e6f2ff;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        .nav-item:hover {
            background: #cce5ff;
        }

        .nav-item.current {
            background: #0066ff;
            color: white;
        }

        .nav-item.answered {
            background: #99ccff;
        }

        .question-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: #0066ff;
        }

        .options-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .option {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .option:hover {
            background: #e9ecef;
        }

        .option input {
            margin-right: 10px;
        }

        .text-answer {
            width: 100%;
            min-height: 120px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            font-size: 1rem;
        }

        .buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }

        button {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .prev-btn {
            background: #6c757d;
            color: white;
        }

        .prev-btn:hover {
            background: #5a6268;
        }

        .next-btn {
            background: #0066ff;
            color: white;
        }

        .next-btn:hover {
            background: #0052d4;
        }

        .submit-btn {
            background: #28a745;
            color: white;
        }

        .submit-btn:hover {
            background: #218838;
        }

        .question-type {
            display: inline-block;
            background: #0066ff;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .score-display {
            text-align: center;
            font-size: 1.8rem;
            font-weight: bold;
            color: #0066ff;
            margin: 20px 0;
        }

        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .question-nav {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>鸿蒙基础知识考试</h1>
        <p>测试您对HarmonyOS基础知识的掌握程度</p>
        <div class="exam-info">
            <div class="info-item">单选题: 10题 (每题2分)</div>
            <div class="info-item">多选题: 5题 (每题6分)</div>
            <div class="info-item">判断题: 5题 (每题2分)</div>
            <div class="info-item">简答题: 4题 (每题10分)</div>
            <div class="info-item">总分: 100分</div>
        </div>
    </header>

    <div class="main-content">
        <div class="questions-section">
            <div class="card">
                <div class="question-type" id="question-type">单选题</div>
                <div class="question-title" id="question-title">1. 鸿蒙操作系统是哪个公司开发的？</div>

                <div class="options-container" id="options-container">
                    <label class="option">
                        <input type="radio" name="answer" value="A">
                        <span>A. 华为技术有限公司</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer" value="B">
                        <span>B. 腾讯科技有限公司</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer" value="C">
                        <span>C. 阿里巴巴集团</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer" value="D">
                        <span>D. 百度公司</span>
                    </label>
                </div>

                <div id="text-answer-container" style="display: none;">
                    <textarea class="text-answer" placeholder="请输入您的答案..."></textarea>
                </div>
            </div>

            <div class="buttons">
                <button class="prev-btn" id="prev-btn"><i class="fas fa-arrow-left"></i> 上一题</button>
                <button class="next-btn" id="next-btn">下一题 <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>

        <div class="sidebar">
            <div class="card timer-container">
                <h3>考试剩余时间</h3>
                <div class="timer" id="timer">60:00</div>
                <button class="submit-btn" id="submit-btn">提交试卷</button>
            </div>

            <div class="card">
                <h3>题目导航</h3>
                <div class="question-nav" id="question-nav">
                    <!-- 题目导航将由JS生成 -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 考试数据
    const examData = {
        timeLimit: 60, // 60分钟
        questions: [
            {
                type: "single",
                title: "1. 鸿蒙操作系统是哪个公司开发的？",
                options: ["A. 华为技术有限公司", "B. 腾讯科技有限公司", "C. 阿里巴巴集团", "D. 百度公司"],
                answer: "A"
            },
            {
                type: "single",
                title: "2. 鸿蒙系统最初发布于哪一年？",
                options: ["A. 2019", "B. 2020", "C. 2021", "D. 2022"],
                answer: "A"
            },
            {
                type: "single",
                title: "3. 鸿蒙系统的设计理念是什么？",
                options: ["A. 全场景智慧体验", "B. 单一设备优化", "C. 仅限手机使用", "D. 仅限物联网设备"],
                answer: "A"
            },
            {
                type: "single",
                title: "4. 鸿蒙系统使用什么开发语言？",
                options: ["A. Java", "B. ArkTS", "C. Python", "D. C++"],
                answer: "B"
            },
            {
                type: "single",
                title: "5. 鸿蒙系统的分布式能力主要基于什么技术？",
                options: ["A. 分布式软总线", "B. 5G网络", "C. 区块链", "D. 云计算"],
                answer: "A"
            },
            {
                type: "single",
                title: "6. 以下哪项不是鸿蒙系统的特点？",
                options: ["A. 分布式架构", "B. 一次开发多端部署", "C. 封闭生态系统", "D. 硬件互助"],
                answer: "C"
            },
            {
                type: "single",
                title: "7. 鸿蒙系统支持哪些设备？",
                options: ["A. 仅智能手机", "B. 智能手机和平板", "C. 多种智能设备", "D. 仅物联网设备"],
                answer: "C"
            },
            {
                type: "single",
                title: "8. 鸿蒙系统的UI开发框架叫什么？",
                options: ["A. ArkUI", "B. HarmonyUI", "C. HuaweiUI", "D. OpenUI"],
                answer: "A"
            },
            {
                type: "single",
                title: "9. 开发鸿蒙应用的主要IDE是什么？",
                options: ["A. DevEco Studio", "B. Harmony Studio", "C. Huawei IDE", "D. Ark Studio"],
                answer: "A"
            },
            {
                type: "single",
                title: "10. 鸿蒙系统的安全机制不包括？",
                options: ["A. 多内核隔离", "B. 分布式权限管理", "C. 完全开放 root 权限", "D. 芯片级安全"],
                answer: "C"
            },
            {
                type: "multiple",
                title: "11. 鸿蒙系统的分布式能力包括哪些？",
                options: ["A. 分布式软总线", "B. 分布式数据管理", "C. 分布式设备虚拟化", "D. 分布式任务调度"],
                answer: ["A", "B", "C", "D"]
            },
            {
                type: "multiple",
                title: "12. 鸿蒙系统可以应用于以下哪些场景？",
                options: ["A. 智能家居", "B. 智慧办公", "C. 运动健康", "D. 影音娱乐"],
                answer: ["A", "B", "C", "D"]
            },
            {
                type: "multiple",
                title: "13. 鸿蒙系统的开发框架支持哪些特性？",
                options: ["A. 声明式UI", "B. 状态管理", "C. 渲染控制", "D. 动态加载"],
                answer: ["A", "B", "C", "D"]
            },
            {
                type: "multiple",
                title: "14. 鸿蒙系统的安全特性包括？",
                options: ["A. 身份认证", "B. 权限管理", "C. 数据加密", "D. 安全审计"],
                answer: ["A", "B", "C", "D"]
            },
            {
                type: "multiple",
                title: "15. 鸿蒙应用包的文件格式是什么？",
                options: ["A. .hap", "B. .app", "C. .harmony", "D. .hmp"],
                answer: ["A"]
            },
            {
                type: "judge",
                title: "16. 鸿蒙系统是开源的。",
                options: ["正确", "错误"],
                answer: "正确"
            },
            {
                type: "judge",
                title: "17. 鸿蒙系统只能运行在华为设备上。",
                options: ["正确", "错误"],
                answer: "错误"
            },
            {
                type: "judge",
                title: "18. 鸿蒙系统支持跨设备无缝协同。",
                options: ["正确", "错误"],
                answer: "正确"
            },
            {
                type: "judge",
                title: "19. 鸿蒙应用可以使用Java语言开发。",
                options: ["正确", "错误"],
                answer: "正确"
            },
            {
                type: "judge",
                title: "20. 鸿蒙系统不支持Android应用。",
                options: ["正确", "错误"],
                answer: "错误"
            },
            {
                type: "text",
                title: "21. 请简要描述鸿蒙系统的分布式架构特点及其优势。",
                answer: ""
            },
            {
                type: "text",
                title: "22. 解释鸿蒙系统的一次开发多端部署理念，并说明其实际应用价值。",
                answer: ""
            },
            {
                type: "text",
                title: "23. 简述鸿蒙系统的安全机制如何保障用户数据和隐私安全。",
                answer: ""
            },
            {
                type: "text",
                title: "24. 谈谈鸿蒙系统在物联网时代的应用前景和挑战。",
                answer: ""
            }
        ]
    };

    // 初始化变量
    let currentQuestion = 0;
    let userAnswers = new Array(examData.questions.length).fill(null);
    let timeLeft = examData.timeLimit * 60; // 转换为秒
    let timerInterval = null;

    // DOM元素
    const questionTypeElement = document.getElementById('question-type');
    const questionTitleElement = document.getElementById('question-title');
    const optionsContainerElement = document.getElementById('options-container');
    const textAnswerContainerElement = document.getElementById('text-answer-container');
    const textAnswerElement = document.querySelector('.text-answer');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const submitBtn = document.getElementById('submit-btn');
    const timerElement = document.getElementById('timer');
    const questionNavElement = document.getElementById('question-nav');

    // 初始化考试
    function initExam() {
        // 生成题目导航
        generateQuestionNav();

        // 显示第一题
        showQuestion(0);

        // 启动计时器
        startTimer();
    }

    // 生成题目导航
    function generateQuestionNav() {
        questionNavElement.innerHTML = '';

        examData.questions.forEach((question, index) => {
            const navItem = document.createElement('div');
            navItem.className = 'nav-item';
            navItem.textContent = index + 1;

            if (index === 0) {
                navItem.classList.add('current');
            }

            navItem.addEventListener('click', () => {
                showQuestion(index);
            });

            questionNavElement.appendChild(navItem);
        });
    }

    // 显示题目
    function showQuestion(index) {
        currentQuestion = index;
        const question = examData.questions[index];

        // 更新导航状态
        document.querySelectorAll('.nav-item').forEach((item, i) => {
            item.classList.remove('current');
            if (userAnswers[i] !== null) {
                item.classList.add('answered');
            } else {
                item.classList.remove('answered');
            }
            if (i === index) {
                item.classList.add('current');
            }
        });

        // 设置题目类型
        let typeText = '';
        switch(question.type) {
            case 'single':
                typeText = '单选题';
                break;
            case 'multiple':
                typeText = '多选题';
                break;
            case 'judge':
                typeText = '判断题';
                break;
            case 'text':
                typeText = '简答题';
                break;
        }
        questionTypeElement.textContent = typeText;

        // 设置题目标题
        questionTitleElement.textContent = question.title;

        // 显示选项或文本输入
        if (question.type === 'text') {
            optionsContainerElement.style.display = 'none';
            textAnswerContainerElement.style.display = 'block';
            textAnswerElement.value = userAnswers[index] || '';
        } else {
            optionsContainerElement.style.display = 'block';
            textAnswerContainerElement.style.display = 'none';

            // 生成选项
            optionsContainerElement.innerHTML = '';
            question.options.forEach((option, i) => {
                const label = document.createElement('label');
                label.className = 'option';

                let input = null;
                if (question.type === 'single' || question.type === 'judge') {
                    input = document.createElement('input');
                    input.type = 'radio';
                    input.name = 'answer';
                    input.value = String.fromCharCode(65 + i); // A, B, C, D

                    // 如果用户已回答过，选中选项
                    if (userAnswers[index] && userAnswers[index].includes(input.value)) {
                        input.checked = true;
                    }
                } else if (question.type === 'multiple') {
                    input = document.createElement('input');
                    input.type = 'checkbox';
                    input.value = String.fromCharCode(65 + i); // A, B, C, D

                    // 如果用户已回答过，选中选项
                    if (userAnswers[index] && userAnswers[index].includes(input.value)) {
                        input.checked = true;
                    }
                }

                const span = document.createElement('span');
                span.textContent = option;

                label.appendChild(input);
                label.appendChild(span);
                optionsContainerElement.appendChild(label);
            });
        }

        // 更新按钮状态
        prevBtn.disabled = index === 0;
        nextBtn.style.display = index === examData.questions.length - 1 ? 'none' : 'block';
        submitBtn.style.display = index === examData.questions.length - 1 ? 'block' : 'none';
    }

    // 保存当前答案
    function saveAnswer() {
        const question = examData.questions[currentQuestion];

        if (question.type === 'text') {
            userAnswers[currentQuestion] = textAnswerElement.value;
        } else {
            const selectedOptions = [];
            document.querySelectorAll('input:checked').forEach(input => {
                selectedOptions.push(input.value);
            });
            userAnswers[currentQuestion] = selectedOptions;
        }

        // 更新导航状态
        if (userAnswers[currentQuestion] !== null) {
            document.querySelectorAll('.nav-item')[currentQuestion].classList.add('answered');
        }
    }

    // 启动计时器
    function startTimer() {
        updateTimerDisplay();

        timerInterval = setInterval(() => {
            timeLeft--;
            updateTimerDisplay();

            if (timeLeft <= 0) {
                clearInterval(timerInterval);
                submitExam();
            }
        }, 1000);
    }

    // 更新计时器显示
    function updateTimerDisplay() {
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;
        timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

        // 时间少于5分钟时改变颜色
        if (timeLeft < 300) {
            timerElement.style.color = '#ff4757';
        }
    }

    // 计算得分
    function calculateScore() {
        let score = 0;

        userAnswers.forEach((answer, index) => {
            const question = examData.questions[index];

            if (question.type === 'single' || question.type === 'judge') {
                if (answer && answer.length > 0 && answer[0] === question.answer) {
                    score += question.type === 'single' ? 2 : 2;
                }
            } else if (question.type === 'multiple') {
                if (answer && arraysEqual(answer, question.answer)) {
                    score += 6;
                }
            }
            // 简答题不自动评分
        });

        return score;
    }

    // 比较两个数组是否相等
    function arraysEqual(a, b) {
        if (a.length !== b.length) return false;
        const sortedA = [...a].sort();
        const sortedB = [...b].sort();
        return sortedA.every((value, index) => value === sortedB[index]);
    }

    // 提交考试
    function submitExam() {
        clearInterval(timerInterval);
        saveAnswer();

        const score = calculateScore();

        // 显示成绩
        document.querySelector('.questions-section').innerHTML = `
            <div class="card">
                <h2>考试结束</h2>
                <div class="score-display">您的得分: ${score} / 100</div>
                <p>${score >= 60 ? '恭喜您通过考试！' : '很遗憾未通过考试，请继续努力！'}</p>
                <p>单选题: ${calculatePartialScore('single')} / 20</p>
                <p>多选题: ${calculatePartialScore('multiple')} / 30</p>
                <p>判断题: ${calculatePartialScore('judge')} / 10</p>
                <p>简答题: 需人工评分 (每题10分)</p>
            </div>
        `;

        // 禁用侧边栏交互
        document.querySelector('.timer-container').innerHTML = '<h3>考试已结束</h3>';
        document.querySelector('.question-nav').innerHTML = '';
    }

    // 计算部分得分
    function calculatePartialScore(type) {
        let score = 0;

        userAnswers.forEach((answer, index) => {
            const question = examData.questions[index];

            if (question.type === type) {
                if (type === 'single' || type === 'judge') {
                    if (answer && answer.length > 0 && answer[0] === question.answer) {
                        score += type === 'single' ? 2 : 2;
                    }
                } else if (type === 'multiple') {
                    if (answer && arraysEqual(answer, question.answer)) {
                        score += 6;
                    }
                }
            }
        });

        return score;
    }

    // 事件监听
    prevBtn.addEventListener('click', () => {
        saveAnswer();
        showQuestion(currentQuestion - 1);
    });

    nextBtn.addEventListener('click', () => {
        saveAnswer();
        showQuestion(currentQuestion + 1);
    });

    submitBtn.addEventListener('click', submitExam);

    // 初始化考试
    initExam();
</script>
</body>
</html>




